<template>
	<view class="card">
		<view  class="p-2 main" :class="getHeadClass" >
			<slot name="title" :class="gettitleClass">
				<text v-if="showhead" class="font-md font-weight">{{headerTitle}}</text>
			</slot>
		</view>
		<view :class="getBodyClass" :style="bodyStyle">
			<image v-if="cover" :src="bodyCover" mode="widthFix"></image>
			<slot />
		</view>
    </view>
</template>

<script>
	export default{
		props:{
			headerTitle:String,
			bodyCover:String,
			// 是否封面图
			cover:{
				type:Boolean,
				default:false
			},
			// 是否显示头部
			showhead:{
				type:Boolean,
				default:true
			},
			// 头部下边框
			headBorderBottom:{
				type:Boolean ,
				default:true
				
			},
			// 卡片内容内边距
			bodyPadding:{
				type:Boolean,
				default:false
			},
			// 是否头部标题加粗
			titleWeight:{
				type:Boolean,
				default:true
			},
			// 内容样式
			bodyStyle:String,
			
		},
		computed:{
			getHeadClass(){
				
				 let BorderBottom = this.headBorderBottom ? 'border-bottom':''
				 return `${BorderBottom}`
				 
			},
			getBodyClass(){
				
				let BodyPadding = this.bodyPadding ? 'p-2' : ''
				return `${BodyPadding}`
			},
			gettitleClass(){
				let titleWeight =  this.titleWeight ? 'font-weight' : ''
				return `${titleWeight}`
			}
		}
	}
</script>

<style>
</style>
